<template>
  <div class="container">
   <div class="left">
      <el-button @click='handleMenu' icon = 'el-icon-menu' size="mini"></el-button>
      <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in this.$store.state.breadcrumb" :key="item.path" :to="item.path">{{item.label}}</el-breadcrumb-item>
      </el-breadcrumb>
   </div>
   <div class="right">
    <el-dropdown @command="handleClick">
  <span class="el-dropdown-link">
    <img src="../assets/images/user.png">
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>个人中心</el-dropdown-item>
    <el-dropdown-item command="cancel">退出</el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>
   
   </div>
     
  </div>
</template>
<script>
import Cookie from 'js-cookie'
export default { 
  name:'CommonHeader',
  methods: {
    handleMenu() {
      this.$store.commit('collapsMenu')
    },
    handleClick(command){
      if(command === 'cancel'){
                Cookie.remove('token')
                // 清除cookie中的menu
                Cookie.remove('menu')
                // 跳转到登录页
                this.$router.push('/login')
      }
    }
  }
}
</script>
<style lang="stylus" scoped> 
.container
  height 60px
  background: #666
  display: flex
  justify-content: space-between
  align-items: center
  padding: 0 20px
  .left
    display: flex
    align-items: center
    .el-breadcrumb
      margin-left: 20px
      >>>.el-breadcrumb__inner
        color: #fff
        cursor pointer
  .right
    img
      height 40px
      width 40px
      border-radius: 50%
    </style>
